<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #jindu {
            position: fixed;
            top: 0;
        }

        .jindu {
            width: 0;
            height: 2px;
            z-index: 100;
            background-color: #1890ff;
            animation: jinduCSS3 0.3s;
        }

        @keyframes jinduCSS3 {

            0% {
                width: 0;
            }

            100% {
                width: 100%;
            }
        }

        #avatarImg {
            width: 40px;
            height: 40px;
            margin-right: 20px;
        }

        #setUp {
            width: 40px;
            height: 60px;
            position: absolute;
            top: 0;
            right: 20px;
            z-index: 10;
            /* 设置文本不可选中 */
            user-select: none;
        }

        #setUpIcon {
            width: 35px;
            height: 35px;
            margin-top: 10px;
            float: right;
            cursor: pointer;
        }

        #setUpValue {
            position: relative;
            left: -80px;
            margin-top: 66px;
            overflow: hidden;
            width: 120px;
            height: 0px;
            background-color: white;
            box-shadow: 1px 1px 4px #afafaf;
            transition: all 0.3s;
        }

        .tipsfu {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        #tips {
            width: 500px;
            height: 50px;
            background-color: yellow;
            margin: auto;
            position: fixed;
            display: block;
            top: -50px;
            animation: tipsDon 4s;
        }

        @keyframes tipsDon {
            20% {
                top: 20px;
            }

            80% {
                top: 20px;
            }

            100% {
                top: -50%;
            }
        }


        body {
            background-color: #eff2f5;
            overflow: hidden;
        }

        .theme {
            width: 88%;
            float: right;
        }

        .top {
            height: 60px;
            background-color: white;
            box-shadow: 4px 4px 4px #ccc;

        }

        .cover {
            width: 60px;
            height: 60px;
        }

        .tab {
            width: 12%;
            height: 100%;
            background-color: #304156;
            position: fixed;
            top: 0;
        }

        .user {
            height: 60px;
            background-color: #1d324b;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .kuai {
            height: 60px;
            color: #bfcbd9;
            display: flex;
            align-items: center;
            padding-left: 20px;
            cursor: pointer;
            /* 设置kuai里面的文本不可选中 */
            user-select: none;
        }

        .kuai:hover {
            background-color: #263445;
        }

        #sonLayout {
            width: 96%;
            margin: auto;

        }

        .sonLayoutCSS3 {
            position: relative;
            left: 200px;
            opacity: 0;
            animation: body 1s;
        }

        @keyframes body {

            50% {
                left: 0px;

            }

            100% {
                opacity: 1;
            }
        }





        .zhenPage {
            width: 1250px;
            height: 540px;
            margin: auto;
            margin-top: 30px;
            position: relative;
        }

        #photo {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
        }

        .imgPreview {
            width: 100%;
            height: 100%;
            background-size: 100%;
            background-image: url(imgs/tianjia.png);
        }

        .imgPreview img {
            width: 100%;
            height: 100%;
        }

        .inputYanshi {
            height: 150px;
            margin-bottom: 50px;
            overflow: hidden;
        }

        .inputYanshi input {
            float: right;
            width: 86%;
        }

        .fileYanshi {
            width: 12%;
            height: 100%;
            /* border: 2px solid black; */
            position: relative;
            float: left;
        }

        #increase {
            width: 90px;
            position: absolute;
            bottom: 20px;
            right: 30px;
            z-index: 10;
        }
    </style>


</head>

<body>

    <!-- 修改分类id,需要先保持默认id,等待自主选择才是其他id -->
    <!-- {{each result item}}
<form action="" method="get">

<select name="title" >
    <option value={{item.id}}>默认</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>

</select>
<button>确定</button>
</form>
{{/each}} -->
    <div id="jindu"></div>


    <div class="tipsfu">

        <div id="tips">
            上次登录时间: {{user.denlu_item}}
        </div>


    </div>

    <div class="tab">

        <div class="user">
            <img src="{{user.avatar}}" alt="" id="avatarImg">
            {{user.username}}
        </div>

        <div id="list" class="kuai">
            文章列表
        </div>

        <div id="category" class="kuai">
            文章分类
        </div>
        <div id="increasePage" class="kuai">
            文章添加
        </div>
    </div>


    <div class="theme">

        <div class="top">


            <div id="setUp">

                <svg t="1630054199791" class="icon" id="setUpIcon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="7136" width="200" height="200">
                    <path
                        d="M995.555556 113.777778H445.155556a170.666667 170.666667 0 0 0-321.422223 0H28.444444a28.444444 28.444444 0 0 0-28.444444 28.444444v56.888889a28.444444 28.444444 0 0 0 28.444444 28.444445h95.288889a170.666667 170.666667 0 0 0 321.422223 0H995.555556a28.444444 28.444444 0 0 0 28.444444-28.444445V142.222222a28.444444 28.444444 0 0 0-28.444444-28.444444zM284.444444 256a85.333333 85.333333 0 1 1 85.333334-85.333333 85.333333 85.333333 0 0 1-85.333334 85.333333zM995.555556 455.111111h-95.288889a170.666667 170.666667 0 0 0-321.422223 0H28.444444a28.444444 28.444444 0 0 0-28.444444 28.444445v56.888888a28.444444 28.444444 0 0 0 28.444444 28.444445h550.4a170.666667 170.666667 0 0 0 321.422223 0H995.555556a28.444444 28.444444 0 0 0 28.444444-28.444445v-56.888888a28.444444 28.444444 0 0 0-28.444444-28.444445z m-256 142.222222a85.333333 85.333333 0 1 1 85.333333-85.333333 85.333333 85.333333 0 0 1-85.333333 85.333333zM995.555556 796.444444H558.933333a170.666667 170.666667 0 0 0-321.422222 0H28.444444a28.444444 28.444444 0 0 0-28.444444 28.444445v56.888889a28.444444 28.444444 0 0 0 28.444444 28.444444h209.066667a170.666667 170.666667 0 0 0 321.422222 0H995.555556a28.444444 28.444444 0 0 0 28.444444-28.444444v-56.888889a28.444444 28.444444 0 0 0-28.444444-28.444445z m-597.333334 142.222223a85.333333 85.333333 0 1 1 85.333334-85.333334 85.333333 85.333333 0 0 1-85.333334 85.333334z"
                        p-id="7137" fill="#8a8a8a"></path>
                </svg>

                <div id="setUpValue">

                    <input id="replace" type="file"></input>
                    <button id="mimaGai">更改密码</button>
                    <button id="loginOut">退出登录</button>

                </div>

            </div>

        </div>

        <!-- if的意思是如果符合条件就显示,不符合就默认隐藏 -->

        <div id="sonLayout">

            <head>
                <title>文章列表</title>
            </head>
            <table lay-filter="demo">

                <thead>
                    <tr>
                        <!-- sort:true 升序降序 -->
                        <th lay-data="{field:'title'}">标题</th>
                        <th lay-data="{field:'img'}">封面</th>
                        <th lay-data="{field:'author'}">作者</th>
                        <th lay-data="{field:'time'}">时间</th>
                        <th lay-data="{field:'status'}">审核状态</th>
                        <th lay-data="{field:'edit'}">编辑</th>
                        <th lay-data="{field:'edit1'}">编辑</th>
                        <th lay-data="{field:'edit2'}">编辑</th>
                    </tr>
                </thead>


                {{each result item}}

                <tbody>

                    <tr>

                        <td>{{item.title}}</td>
                        <td class="cover"><img src={{item.img}} alt="" class="cover"></td>
                        <td>{{item.author}}</td>
                        <td>{{item.time}}</td>
                        <td>{{item.status}}</td>

                        <td>

                            <form action="cha">
                                <button name="chaid" value={{item.id}}
                                    style="height: 30px;width:100%;background-color:#a8fc2a;border: 0;color: white;">查看详情</button>
                            </form>
                        </td>
                        <td>
                            <form action="gai" method="get">
                                <button name="gaiid" value={{item.id}}
                                    style="height: 30px;width:100%;background-color:#1890ff;border: 0;color: white;">修改</button>
                            </form>


                        </td>
                        <td>
                            <button class="articleDelete" onclick="sss('{{item.id}}','{{item.img}}',this)"
                                style="height: 30px;width:100%;background-color:#ff6c6c;border: 0;color: white;">删除</button>
                        </td>


                    </tr>

                </tbody>
                {{/each}}



            </table>


        </div>

    </div>

    <!-- <div id="controlBar"></div> -->

</body>


<script src="/jquery-3.5.1.js"></script>
<script src="/layer/layer.js"></script>
<script src="/layui/layui.js"></script>

<script src="/wangEditor.min.js"></script>


<script>


    // 侧边栏点击改变字体颜色
    var tabColor = 0
    var tabKuai = document.getElementsByClassName("kuai")
    function bodyCSS3() {

        sonLayout.className = "sonLayoutCSS3";
        jindu.className = "jindu"
        setTimeout(() => {
            sonLayout.className = "";
            jindu.className = "";
        }, 300)
        for (let i = 0; i < tabKuai.length; i++) {
            if (tabColor == i) {
                tabKuai[i].style.color = "#409eff"
            } else {
                tabKuai[i].style.color = ""
            }
        }

    }

    var setUpValueState = true
    setUpIcon.onclick = function () {

        if (setUpValueState == true) {
            setUpValue.style.height = 200 + "px"
            setUpValueState = false
        } else {
            setUpValue.style.height = 0
            setUpValueState = true
        }
    }

    mimaGai.onclick = function () {

        layer.open({
            area: ['500px', '300px'],
            type: 1,
            content: '<input type="text" id="jiuPassword" required lay-verify="required" placeholder="旧密码" autocomplete="off" class="layui-input"><input type="text"  id="xinPassword" required lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input"><input type="text" id="xinPasswordTwo" required lay-verify="required" placeholder="确认密码" autocomplete="off" class="layui-input"><button id="mimaZhen">确定</button>'
        });

        mimaZhen.onclick = function () {
            if (!jiuPassword.value == "{{user.password}}") {
                layer.msg('旧密码错误');
                return
            }
            if (!xinPassword.value == xinPasswordTwo.value) {
                layer.msg('两次密码不一致');
                return
            }
            if (jiuPassword.value == "{{user.password}}" && xinPassword.value == xinPasswordTwo.value) {

                let xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function () {
                    layer.closeAll('page');
                    layer.msg('修改成功,下次登录请用新密码');
                }

                xhr.open('post', '/mimagai', true)

                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

                xhr.send(`password=${xinPassword.value}`);
            }

        }
    }


    var table = layui.table;

    //转换静态表格
    table.init('demo', {
        height: 500, //设置高度
        page: true
        //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        //支持所有基础参数
    });


    //主页按钮 (删除,退出登录等)

    replace.onchange = function () {

        let formData = new FormData()

        let file = replace.files[0]; // 文件二进制数据
        formData.append('avatar', file)


        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {

            let filereader = new FileReader()

            filereader.readAsDataURL(file);

            filereader.onload = function (e) {

                avatarImg.src = this.result

            }

        }
        xhr.open('post', '/avatar', true)

        xhr.send(formData)
    }



    function sss(aa, bb, jiedian) {

        layer.confirm('确定要删除吗?', {
            btn: ['确定', '取消'] //按钮
        }, function () {

            let xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {

                // remove()删除自身  removeChild()删除子元素  parentNode 他的父元素   (找了jiedian也就是那个按钮的爷爷)
                // jiedian.parentNode.parentNode.parentNode.remove();
                list.onclick()
            }

            xhr.open('post', `/delete`, true); // 请求方法、请求路径、是否异步（默认是true-异步，false是同步）
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

            xhr.send(`id=${aa}&img=${bb}`);

            layer.msg('删除成功', { icon: 1 },
            );
        }, function () {
            layer.msg('用户取消', {

            });
        });

    }

    loginOut.onclick = function () {
        let date = new Date();

        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let date1 = date.getDate();
        let hour = date.getHours();
        let minutes = date.getMinutes();
        let second = date.getSeconds();
        let item = `${year}-${month}-${date1} ${hour}:${minutes}:${second}`

        location.href = `/loginOut?id={{user.id}}&denlu_item='${item}'`
    }



    list.onclick = function () {
        tabColor = 0
        bodyCSS3()
        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                sonLayout.innerHTML = xhr.responseText
                var table = layui.table;
                //转换静态表格
                table.init('demo', {
                    height: 500, //设置高度
                    page: true
                    //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                    //支持所有基础参数

                });
            }
        }

        xhr.open('get', `/list`, true);

        xhr.send();
    }

    category.onclick = function () {
        tabColor = 1
        bodyCSS3()
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                var xhr1 = new XMLHttpRequest();
                sonLayout.innerHTML = xhr.responseText

                let button = document.getElementsByClassName("categoryButton")

                for (let i = 0; i < button.length; i++) {

                    button[i].onclick = function () {

                        xhr1.onreadystatechange = function () {

                            if (this.readyState === 4 && this.status === 200) {

                                sonLayout.innerHTML = xhr1.responseText
                                var table = layui.table;

                                table.init('demo', {
                                    height: 500,
                                    page: true

                                });

                            }
                        }

                        xhr1.open('get', `/category?cat_id=${this.value}`, true);

                        xhr1.send();


                    }
                }

            }
        }

        xhr.open('get', `/categoryPage`, true);

        xhr.send();
    }


    increasePage.onclick = function () {
        tabColor = 2
        bodyCSS3()
        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {

            if (xhr.responseText != '') {

                sonLayout.innerHTML = xhr.responseText

                //这里是富文本,因为放在外面会因为找不到content而报错
                //等有数据时再设置富文本的相关设置

                const E = window.wangEditor
                const editor = new E('#content')
                // 或者 const editor = new E( document.getElementById('div1') )
                editor.create()


                //图片回显
                //onchange当前元素失去焦点并且元素的内容发生改变而触发的事件 
                photo.onchange = function (event) {
                    // 获取文件的上传列表
                    let file = this.files[0]

                    //new FileReader()用来把二进制图像转成base64
                    let filereader = new FileReader()

                    //readAsDataURL() 是FileReader()之中的一个读取二进制文件并转化为base64的方法
                    filereader.readAsDataURL(file);  //读取了file并转化成base64

                    // 如果不给filereader设置onload而直接给preview赋值会因为filereader还没有值而报错,所以得等filereader有值了之后,也就是onload事件触发了才给preview赋值
                    filereader.onload = function (e) {
                        //this.result是filereader的base64
                        preview.src = this.result
                        preview.style.backgroundColor = "white"
                    }
                }


                increase.onclick = function () {


                    var date = new Date();

                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;    //js从0开始取 
                    var date1 = date.getDate();
                    var hour = date.getHours();
                    var minutes = date.getMinutes();
                    var second = date.getSeconds();

                    time.value = `${year}-${month}-${date1} ${hour}:${minutes}:${second}`;

                    // 创建一个formData表单对象，此对象设置数据可以通过ajax的send发送给服务器
                    let formData = new FormData()

                    let file = photo.files[0]; // 文件二进制数据

                    // 追加数据
                    formData.append('title', title.value)
                    formData.append('img', file)
                    formData.append('author', author.value)
                    formData.append('content', editor.txt.html())
                    formData.append('toExamine', toExamine.value)
                    formData.append('cat_id', cat_id.value)
                    formData.append('time', time.value)

                    // formData.delete('a'); 删除指定的key
                    // console.log(formData.get('title')) // 获取指定key的value
                    // console.log(formData.get('email')) // 判断是否有key的存储在
                    // console.log(formData.getAll('avatar')) // 判断是否有key的存储在

                    // 发送ajax -post请求
                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        increasePage.click()
                    }
                    xhr.open('post', '/upload', true)
                    // 设置请求头，告诉服务器传递过去数据的MIME类型，
                    // 服务器接收不一样的mime类型，则处理方式也是不一样的。
                    // 不要设置请求头Content-type
                    // xhr.setRequestHeader("Content-type",'application/x-www-form-urlencoded')
                    if (title.value != "" && file != "" && author.value != "" && editor.txt.html() != "" && toExamine.value != "" && cat_id.value != "" && time.value != "") {
                        xhr.send(formData)
                        layer.msg('添加成功', { icon: 1 })


                    }


                }
            }
        }

        xhr.open('get', `/zhen`, true);

        xhr.send();

    }


    // 调用侧边栏点击改变字体颜色
    bodyCSS3()

</script>

</html>